.transition{
    transition: all 0.5s ease-in-out;
}
$transition:(
    none:none,
    all:all,
    default:(background-color, border-color, color, fill, stroke, opacity, box-shadow, transform),
    colors:(background-color, border-color, color, fill, stroke),
    opacity:opacity,
    shadow:box-shadow,
    transform:transform,
);

@each $key,$value in $transition {
    .transition-#{$key}{
        transition-property: $value;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }
}

/***************************************过渡时间****************/
$duration:(
    75:75ms,
    100:100ms,
    150:150ms,
    200:200ms,
    300:300ms,
    500:500ms,
    700:700ms,
    1000:1000ms,
);

@each $key,$value in $duration {
    .duration-#{$key}{
        transition-duration: $value;
    }
}

/***************************************过渡计时函数****************/
.ease-linear{
    transition-timing-function: linear;
}
$transition-timing:(
    in:(0.4, 0, 1, 1),
    out:(0, 0, 0.2, 1),
    in-out:(0.4, 0, 0.2, 1),
);

@each $key,$value in $transition-timing {
    .ease-#{$key}{
        transition-timing-function: cubic-bezier($value);
    }
}

/***************************************过渡计时函数****************/
$delay:(
    75:75ms,
    100:100ms,
    150:150ms,
    200:200ms,
    300:300ms,
    500:500ms,
    700:700ms,
    1000:1000ms,
);

@each $key,$value in $delay{
    .delay-#{$key}{
        transition-delay: $value;
    }
}